<template>
	<view class="full box relative p-safe order-detail-container-wrap flex column">
		<view class="relative flex-1 w-100">
			<view class="absolute inset">
				<scroll-view scroll-y class="full">
					<view class="details">
						<view class="head flex">
							<view class="room flex">
								<image :src="order.store_image" mode="aspectFill"></image>
								<view>{{order.store_name}}</view>
							</view>
							<!-- <image class="kmm" src="/images/kmm.png" bindtap="code" wx:if="{{order.status == 30 || order.status == 31}}"></image>
				            <view class="right" wx:else>
				              <image class="kmm" src="/images/kmm2.png"></image>
				              <view class="lable" wx:if="{{order.status==31}}">已使用</view>
				              <view class="lable" wx:if="{{order.status==32}}">已过期</view>
				            </view> -->
						</view>
						<view>
							<view class="li flex">
								<view class="lable">包间：</view>
								<view>{{order.room_name}}</view>
							</view>
							<view class="li flex">
								<view class="lable">开始时间：</view>
								<view>{{order.start_time}}</view>
							</view>
							<view class="li flex">
								<view class="lable">结束时间：</view>
								<view>{{order.end_time}}</view>
							</view>
							<view class="li flex">
								<view class="lable">订单金额：</view>
								<view>¥{{order.pay_price}}</view>
							</view>
							<view class="li flex">
								<view class="lable">支付方式：</view>
								<view>{{ order.payTypeText }}</view>
							</view>
							<view class="li flex">
								<view class="lable">服务时长：</view>
								<view>共{{order.num}}小时</view>
							</view>
							<view class="li flex">
								<view class="lable">下单手机号：</view>
								<view class="user-mobile" style="color: #C5996A;">
									<text>{{order.mobile}}</text>
									<text class="buy-num">已消费{{ order.xiaofei_cishu || 0 }}次</text>
								</view>
								<view v-if="showCopyBtn" style="margin-left: auto;font-size: 28rpx;color: #333;"
									@click="copyHandle">
									<text>复制</text>
								</view>
								<view v-if="showCopyBtn" style="margin-left: 24rpx;font-size: 28rpx;color: #333;"
									@click="callPhone">
									<text>呼叫</text>
								</view>
							</view>
							<view class="li flex">
								<view class="lable">下单时间：</view>
								<view>{{order.time}}</view>
							</view>
							<view class="li flex">
								<view class="lable">消费时长：</view>
								<view>{{ order.xiaofei_shichang }}</view>
							</view>
							<view class="li flex">
								<view class="lable">消费金额：</view>
								<view>￥{{ order.shiji_pay_price }}</view>
							</view>
							<view class="li flex">
								<view class="lable">订单编号：</view>
								<view>{{order.order_no}}</view>
							</view>
							<view class="li address flex">
								<view class="lable" style="white-space: nowrap;">茶室地址：</view>
								<view style="word-break: break-all;">{{order.address}}</view>
							</view>
							<!-- <view class="li flex" style="margin-top:15px" wx:if="{{order.status <32}}">
				               <view class="lable">开门密码：</view>
				               <view style="font-weight: bold;font-size:20px">{{order.door_password}}</view>
				             </view> -->
							<view class="li flex" style="color:red" v-if="order.refund_status == 3">
								<view class="lable">退款金额：</view>
								<view>¥{{order.refund_price}}</view>
							</view>
						</view>
						<!-- <view class="reorder-list" wx:if="{{ reorderList.length }}">
							<view class="title">续单记录</view>
							<view class="reorder-item" wx:for="{{ reorderList }}" wx:key="index">
								<view class="reorder-item-view" style="line-height: 1.4">
									<text class="label">第{{ index + 1 }}次续单</text>
								</view>
								<view class="reorder-item-view">
									<text class="label">续单时长：</text>
									<text class="value">{{ item.num }}小时</text>
								</view>
								<view class="reorder-item-view">
									<text class="label">支付金额：</text>
									<text class="value">￥{{ item.price }}</text>
								</view>
								<view class="reorder-item-view">
									<text class="label">续单时间：</text>
									<text class="value">{{ item.create_time }}</text>
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="close-btn">
			<text class="btn-inner" @click="closeHandle">结束订单</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		onLoad(ev) {
			const { id } = ev
			this.initData(id)
			this.id = id
		},
		computed: {
			...mapGetters(['userInfo']),
			showCopyBtn() {
				const { order } = this
				return !!order || order.length > 0
			}
		},
		methods: {
			closeHandle() {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要提前结束吗?',
					success: async ev => {
						if (ev.cancel) return
						const { id } = this
						const { mobile } = this.userInfo
						this.https('/order/earlyClose', {
							order_id: id,
							mobile,
						}).then(resp => {
							const { code, msg } = resp
							this.$toast({ title: msg })
							if (code === 1) {
								this.initData(id)
							}
						}).catch(err => {
							this.$toast({ title: err.msg })
						})
					}
				})
			},
			callPhone() {
				const { mobile } = this.order
				uni.showModal({
					title: '提示',
					content: `您确定要拨打 ${mobile} 吗?`,
					success: ev => {
						if (ev.cancel) return
						uni.makePhoneCall({
							phoneNumber: mobile,
						})
					}
				})
			},
			copyHandle() {
				const { mobile } = this.order
				uni.setClipboardData({
					data: mobile,
					success: () => {
						this.$toast({ title: '复制成功' })
					}
				})
			},
			async initData(id) {
				const resp = await this.https('/order/orderDetail', {
					order_id: id,
				})
				if (!resp.data) resp.data = {}
				const payTypeEnum = {
					1: '余额支付',
					2: '余额支付',
					3: '美团验券',
					4: '抖音验券'
				}
				resp.data.payTypeText = payTypeEnum[resp.data.pay_type] || '-'
				this.order = resp.data
			}
		},
		data() {
			return {
				reorderList: [],
				order: {},
			};
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/opening_code/opening_code.wxss */
	/*.container{*/
	/*  padding-bottom: 140rpx;*/
	/*}*/
	.user-mobile {
		display: flex;
		align-items: center;

		.buy-num {
			margin-left: 12rpx;
			color: #999;
		}
	}

	.close-btn {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 0 32rpx;
		display: flex;

		.btn-inner {
			flex: 1;
			padding: 24rpx 0;
			background-color: #4b59df;
			color: #fff;
			font-weight: bold;
			border-radius: 68rpx;
			text-align: center;
		}
	}

	.order-detail-container-wrap {
		padding: 16rpx 32rpx env(safe-area-inset-bottom);
	}

	.order-detail-container-wrap .reorder-list {
		margin-top: 24rpx;
	}

	.order-detail-container-wrap .reorder-list .title {
		height: 44rpx;
		font-size: 34rpx;
		font-weight: 600;
		color: #1D2129;
		line-height: 44rpx;
		margin-bottom: 24rpx;
	}

	.order-detail-container-wrap .reorder-list .reorder-item {
		display: flex;
		flex-flow: column;
		margin-bottom: 24rpx;
	}

	.order-detail-container-wrap .reorder-list .reorder-item .reorder-item-view {
		padding: 8rpx 0;
		display: flex;
		align-items: center;
		line-height: 1;
	}

	.order-detail-container-wrap .reorder-list .reorder-item .reorder-item-view .label {
		color: #666;
		margin-right: 4rpx;
		font-weight: 400;
	}

	.order-detail-container-wrap .reorder-list .reorder-item .reorder-item-view .value {
		font-weight: 600;
		font-size: 28rpx;
	}

	.details {
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		border-radius: 12rpx;
	}

	.btn {
		background-color: #C5996A;
		color: #FFF;
	}

	.details .head {
		justify-content: space-between;
		padding-right: 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(220, 220, 220, 0.5);
		margin-bottom: 20rpx;
	}

	.details .head .room {
		font-size: 36rpx;
	}

	.details .head .room image {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		margin-right: 36rpx;
	}

	.details .head .kmm {
		width: 92rpx;
		height: 92rpx;

	}

	.details .head .right {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.details .head .right .kmm {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
	}

	.details .head .right .lable {
		color: #999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.details .li {
		font-size: 28rpx;
		margin-bottom: 6rpx;
		font-weight: 600;
		padding: 4rpx 0;
	}

	.details .li .lable {
		color: #666;
		margin-right: 4rpx;
		font-weight: 400;
	}

	.details .li.address {
		color: #C5996A;
	}

	.details .handle {
		justify-content: center;
		font-size: 24rpx;
		color: #C5996A;
		padding: 24rpx 0;
	}

	.details .handle image {
		width: 19rpx;
		height: 11rpx;
		margin-left: 16rpx;
	}

	.details .handleMore image {
		transform: rotate(180deg)
	}
</style>